<!--suppress ALL -->
<template>
  <transition name="slide">
  <div class="page">
    <page-header title="我的报名"></page-header>
    <scroll class="content" :data="list" ref="scroll" :class="{'loading': loading}"
      :pullup="true" :pulldown="true" @scrollToEnd="_more" @pullingDown="_refash">
      <ul class="list">
        <li v-for="(item, index) in list" :key="index" class="item">
          <div class="pic">
            <img :src="item.bean.activity.picture" alt="" @click="_turn(item)">
          </div>
          <div class="info" @click="_turn(item)">
            <p class="title">{{item.bean.activity.name}}</p>
            <p class="des"  v-html="item.bean.activity.acabstract"></p>
          </div>
          <div class="price">
            <p class="value">¥{{item.bean.money}}</p>
            <div v-if="item.bean.status == 1" class="payBtn" @click="goPay(item)">支付</div>
            <div v-if="item.bean.status == 1 || item.bean.status == 2" class="payBtn" @click="revoke(item)">撤销</div>
            <div v-if="item.bean.status == 2 && item.bean.restNumb > 0" class="payBtn" @click="appointment(item)">预约</div>
            <div v-if="item.bean.status == 2" class="payBtn" @click="pin(item)">核销</div>
          </div>
          <div class="date">
            <br>
            <p class="value">{{item.bean.activity.acplace}}</p>
            <p class="value">{{item.bean.activity.startTime}} 至 {{item.bean.activity.endTime}}</p>
            <p class="value"><dict-lable :value="item.bean.status" type="fund_pay_status" orgId=""></dict-lable></p>
          </div>
        </li>
        <p class="nomore" v-if="nomore">没有更多</p>
      </ul>
    </scroll>
  </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import dictLable from 'components/dict-label'
import Scroll from 'components/scroll/scroll'
import * as exampleApi from 'api/example'
export default {
  components: {
    PageHeader,
    dictLable,
    Scroll
  },
  data () {
    return {
      list: [],
      page: 1,
      pageSize: 5,
      type: '',
      text: '',
      loading: false,
      nomore: false
    }
  },
  created() {
    this._initData()
  },
  methods: {
    _more() {
      if (this.nomore) {
        return
      }
      this.page++
      this._initData()
    },
    _refash() {
      this.page = 1
      this.loading = true
      this.nomore = false
      this._initData()
    },
    _initData() {
      exampleApi.modePost('/api/public/wz/activity/acmemlist', ({
        memberId: sessionStorage.getItem('studentId'),
        pageNo: this.page,
        pageSize: this.pageSize}))
        .then(res => {
          if (res.data.data.rows.length < this.pageSize) {
            this.nomore = true
          }
          if (this.page === 1) {
            this.list = res.data.data.rows
          } else if (this.page > 1) {
            this.list = this.list.concat(res.data.data.rows)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    _turn(item) {
      this.$router.push({
        path: `/activity/detail${item.bean.activity.id}:${item.bean.id}`
      })
    },
    goPay(item) {
      this.$router.push({
        path: `/activity/pay${item.bean.id}`
      })
    },
    revoke(item) {
      if (confirm('确认撤销该订单吗？')) {
        exampleApi.modePost('/api/public/wz/activity/revoke', ({
          applyId: item.bean.id
        })).then(res => {
          alert(res.data.msg)
          if (res.data.code === '0') {
            this._initData()
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    appointment(item) {
      this.$router.push({
        path: `/activity/scene${item.bean.id}`
      })
    },
    pin(item) {
      this.$router.push({
        path: '/activity/myScene' + item.bean.id
      })
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" scoped>
  .slide-enter-active,.slider-leave-active {
    transition: all 0.3s
  }
  .slide-enter,.slide-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .page {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .content{
      position: relative;
      height:calc(~"100% - 84px");
      overflow: hidden;
      &::after {
        position: absolute;
        display: none;
        content: '';
        top: 10px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        background: url('../../assets/image/loading.gif') no-repeat center / 40px auto;
      }
      .list{
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: 100%;
      }
      .item{
        position: relative;
        width: 100%;
        height: 350px;
        background-color: #ffffff;
        box-sizing:border-box;
        padding: 20px;
        padding-bottom: 140px;
        margin-bottom: 20px;
        display: flex;
        font-family: PingFang;
        .pic{
          width: 190px;
          height: 100%;
          background-color: #ffffff;
          border-radius: 12px;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .info{
          flex:1;
          padding: 0 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title{
            padding: 10px 0;
            font-weight: bold;
            font-size: 26px;
            color: #333333;
          }
          .des{
            font-size: 20px;
            line-height: 30px;
            color: #999999;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical
          }

        }
        .price{
          flex: 0 0 140px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          border-left: 1px solid #ccc;
          box-sizing: border-box;
          padding-left: 20px;
          .value{
            font-size: 32px;
            color: #ff0015;
            font-weight: bold;
          }
          .turnBtn{
            width: 120px;
            height: 50px;
            background-image: linear-gradient(#419eff, #419eff);
            border-radius: 6px;
            line-height: 50px;
            text-align: center;
            color: #fff;
          }
          .payBtn{
            width: 120px;
            height: 50px;
            background-image: linear-gradient(#ff4141, #ff4141);
            border-radius: 6px;
            line-height: 50px;
            text-align: center;
            color: #fff;
          }
        }
        .date{
          position: absolute;
          width:100%;
          border-top: 1px solid #cccccc;
          height: 120px;
          left: 0px;
          bottom: 0;
          font-size: 25px;
          font-family: 'PingFangSC';
          color: #333333;
          align-items: center;
          .value{
            color: #ce7514;
            &::before{
               content: '';
               display: inline-block;
               width: 36px;
               height: 30px;
               vertical-align: middle;
             }
          }

        }
      }
      .nomore{
        font-size: 22px;
        color: #999999;
        text-align: center;
        padding-bottom: 20px;
      }
    }
    .content.loading{
      &::after {
        display: block;
      }
    }
  }
</style>
